<template>
	<view class="content">
		<view class="nav-part-bg"></view>
		<view class="nav-day">
			<!-- <selectDay :outDate="selDay" @selectDay="updateDay"></selectDay> -->
			<view class="statstic">
				<view class="cell">
					<text class="cell-top">车辆数</text>
					<u-count-to color="white" :startVal="0" :endVal="carSum"></u-count-to>
				</view>
				<view class="cell">
					<text class="cell-top">运送旅客</text>
					<u-count-to color="white" :startVal="0" :endVal="peopleSum"></u-count-to>
				</view>
				<view class="cell">
					<text class="cell-top">线路趟次</text>
					<u-count-to color="white" :startVal="0" :endVal="taskSum"></u-count-to>
				</view>
			</view>
		</view>
		<view class="nav-body" v-if="lineList.length">
			<view class="sub" v-for="(item, index) in lineList" :key="index">
				<view class="foot-head">
					<text>{{ item.lineName }}</text>
				</view>
				<view class="row-tip">
					<view class="cell">
						<view class="cell-row-left">
							<text class="cell-title">车辆数：</text>
							<text class="cell-content">{{ item.vehicleCnt }}</text>
						</view>
						<view class="cell-row-right">
							<text class="cell-title">运输旅客：</text>
							<text class="cell-content">{{ item.total }}</text>
						</view>
					</view>
					<view class="cell">
						<text class="cell-title">线路趟次：</text>
						<text class="cell-content">{{ item.taskCnt }}趟</text>
					</view>
				</view>
			</view>
		</view>
		<empty class="nav-body" v-else text="暂无数据"></empty>
		<tabBar></tabBar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import empty from '@/components/empty.vue';
import common from '@/utils/common.js';
import selectDay from '@/components/selectDay.vue';
import planjs from '@/api/plan.js';
export default {
	computed: { ...mapGetters(['token']) },
	data() {
		return {
			selDay: new Date(),
			lineList: [],
			carSum: 0,
			peopleSum: 0,
			taskSum: 0
		};
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		// #ifndef MP
		uni.hideTabBar();
		// #endif
		this.initPage();
	},
	async onPullDownRefresh() {
		await this.initPage();
		uni.stopPullDownRefresh();
		uni.showToast({
			icon: 'none',
			title: '刷新成功',
			duration: 300
		});
	},
	methods: {
		async initPage() {
			let res = await planjs.getLineList(this.token);
			if (common.httpIsWrong(res)) return;
			this.lineList = res.json.data.data;
			let l = 0,
				j = 0,
				k = 0;
			for (let i = 0; i < this.lineList.length; i++) {
				l += Number(this.lineList[i].vehicleCnt);
				j += Number(this.lineList[i].total);
				k += Number(this.lineList[i].taskCnt);
			}
			this.carSum = l;
			this.peopleSum = j;
			this.taskSum = k;
		},
		boxTag: (status) => {
			switch (status) {
				case 0:
					return 'sub color-sub';
				case 1:
					return 'sub color-sub2';
				case 2:
					return 'sub color-sub3';
			}
		},
		cssTag: (status) => {
			switch (status) {
				case 0:
					return 'tag-vertical color-tip';
				case 1:
					return 'tag-vertical color-tip2';
				case 2:
					return 'tag-vertical color-tip3';
			}
		},
		cssSeal: (status) => {
			switch (status) {
				case 0:
					return 'seal seal-bgcolor';
				case 1:
					return 'seal seal-bgcolor2';
				case 2:
					return 'seal seal-bgcolor3';
			}
		},
		cssSeal2: (status) => {
			switch (status) {
				case 0:
					return 'seal-son seal-s-bgcolor';
				case 1:
					return 'seal-son seal-s-bgcolor2';
				case 2:
					return 'seal-son seal-s-bgcolor3';
			}
		},
		cssSeal3: (status) => {
			switch (status) {
				case 0:
					return 'css-tip seal-color';
				case 1:
					return 'css-tip seal-color2';
				case 2:
					return 'css-tip seal-color3';
			}
		},
		textTag: (status) => {
			switch (status) {
				case 0:
					return '已完成';
				case 1:
					return '进行中';
				case 2:
					return '未开始';
			}
		},
		updateDay(day) {
			this.selDay = day;
		}
	},
	components: {
		tabBar,
		selectDay,
		empty
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	.statstic {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 150rpx;
		background-color: #1a90e4;
		.cell {
			display: flex;
			width: 33.33%;
			height: 100%;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.cell-top {
				color: white;
				letter-spacing: 10rpx;
			}
		}
	}
	.nav-day {
		width: 100%;
		height: auto;
		color: white;
		display: flex;
		flex-direction: column;
		background-color: #1a90e4;
		position: fixed;
		top: var(--window-top, 0);
		z-index: 99;
	}
	.nav-part-bg {
		width: 100%;
		height: 100rpx;
		background-color: #1a90e4;
		position: fixed;
		top: 0;
		z-index: 0;
	}
	.nav-body {
		width: 100%;
		height: 100%;
		padding-top: 150rpx;
		overflow: auto;
		position: relative;
		.sub {
			height: auto;
			display: flex;
			flex-direction: column;
			margin: 30rpx 20rpx;
			border-radius: 10rpx;
			background-color: #f7f7f7;
			box-shadow: 0px 1px 5px #888888;
			position: relative;
			.foot-head {
				height: 80rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
			}
			.tag-vertical {
				position: absolute;
				top: 0;
				left: 0;
				padding: 8rpx 0;
				width: 28px;
				color: #fff;
				text-align: center;
			}
			.tag-vertical::after {
				position: absolute;
				content: '';
				left: 0;
				top: 100%;
				border-style: solid;
				border-width: 0 14px 14px 14px;
			}
			.tag-vertical.color-tip::after {
				border-color: #00d9a9 #00d9a9 transparent #00d9a9;
			}
			.tag-vertical.color-tip {
				background: #00d9a9;
			}
			.tag-vertical.color-tip2::after {
				border-color: #ff5500 #ff5500 transparent #ff5500;
			}
			.tag-vertical.color-tip2 {
				background: #ff5500;
			}
			.tag-vertical.color-tip3::after {
				border-color: #d1d1d1 #d1d1d1 transparent #d1d1d1;
			}
			.tag-vertical.color-tip3 {
				background: #d1d1d1;
			}
			.collapse {
				width: 100%;
			}
			.step {
				display: flex;
				.slot-content {
					height: auto;
					margin: 20rpx 10rpx;
					border-radius: 10rpx;
					border: solid 1rpx #3c9cff;
					border-top: none;
					.part1 {
						border-top: solid 1rpx #3c9cff;
					}
					.sub-row {
						display: flex;
						align-items: center;
						margin: 20rpx 20rpx;
						.row {
							width: 50%;
						}
						.row-name {
							width: 220rpx;
							border: solid 1rpx #3c9cff;
							color: #3c9cff;
							font-size: 26rpx;
							padding: 5rpx 20rpx;
							border-radius: 10rpx;
							text-align-last: justify;
						}
						.row-cell {
							color: #1a90e4;
							margin: 0 20rpx;
						}
					}
				}
				.slot-icon {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					font-size: 32rpx;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.slot-left {
					background-color: #969799;
				}
				.slot-right {
					background-color: #00ff7f;
				}
				.slot-mid {
					background-color: #ff0000;
				}
			}
			.row-tip {
				padding: 10rpx 30rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				background-color: #e8f2fe;
				border-radius: 10rpx;
				.seal {
					width: 110rpx;
					height: 110rpx;
					border: solid 6rpx #b4b4b4;
					border-radius: 100%;
					background-color: white;
					opacity: 0.7;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					.seal-son {
						width: 100rpx;
						height: 100rpx;
						border: solid 2rpx #b4b4b4;
						border-radius: 100%;
						background-color: white;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						.seal-content {
							position: absolute;
							text-align: center;
							transform: rotate(-45deg);
							color: #d1d1d1;
							font-weight: 900;
							.css-tip {
								font-size: 30rpx;
							}
							.css-time {
								font-size: 20rpx;
							}
							.seal-color {
								color: #00d9a9;
							}
							.seal-color2 {
								color: #ff5500;
							}
							.seal-color3 {
								color: #d1d1d1;
							}
						}
					}
					.seal-s-bgcolor {
						border: solid 2rpx #00d9a9;
					}
					.seal-s-bgcolor2 {
						border: solid 2rpx #ff5500;
					}
					.seal-s-bgcolor3 {
						border: solid 2rpx #d1d1d1;
					}
				}
				.seal-bgcolor {
					border: solid 6rpx #00d9a9;
				}
				.seal-bgcolor2 {
					border: solid 6rpx #ff5500;
				}
				.seal-bgcolor3 {
					border: solid 6rpx #d1d1d1;
				}
				.tip-m {
					color: #3c9cff;
				}
				.cell {
					padding: 10rpx 0;
					display: flex;
					.cell-title {
						letter-spacing: 10rpx;
						font-size: 28rpx;
					}
					.cell-content {
						letter-spacing: 10rpx;
						font-size: 28rpx;
						color: #1a90e4;
						margin: 0 20rpx;
					}
					.cell-content2 {
						font-size: 28rpx;
						color: #1a90e4;
						margin: 0 20rpx;
					}
					.cell-row-left {
						width: 50%;
					}
					.cell-row-right {
						flex: 1;
					}
					.cell-row {
						width: 50%;
					}
				}
			}
		}
	}
}
::v-deep .u-steps.u-steps--column {
	width: 100%;
}
</style>
